<template>
  <div class="jl_tabs" v-if="!hide" :style="{'true':'display:none'}[hide]">
    <template v-for="(tab,index) in tabList">
      <div class="jl_tabs_item" :class="{'true':'xuan'}[isSelected(index)]" @click="changeTab(index)">
        <div class="icon">
          <span class="iconfont">{{ tab.ionic }}</span>
        </div>
        <span class="name">{{ tab.name }}</span>
      </div>
    </template>
  </div>
</template>

<script>
  export default {
    name: "jl-tabs",
    props: {
      tabList: {},
    },
    data() {
      return {
        tabIndex: 0,
        hide: false
      }
    },
    methods: {
      isSelected(tabIndex) {
        return this.tabIndex == tabIndex;
      },
      changeTab(tabIndex) {
        this.tabIndex = tabIndex;
        this.$router.replace(this.tabList[this.tabIndex].path)
      },
      isLeaveTabs() {
        let fullPath = this.$route.fullPath;
        let index = fullPath.lastIndexOf('/');
        let n = fullPath.split('/').length - 1;
        return !(index != 0 && index != fullPath.length - 1) && n < 3
      },
      hideTabs() {
        let fullPath = this.$route.fullPath;
        let index = fullPath.lastIndexOf('/');
        let n = fullPath.split('/').length - 1;
        this.hide = n > 2 && index != fullPath.length - 1;
      }
    },
    created() {
      if (this.isLeaveTabs()) {
        this.$router.replace(this.tabList[this.tabIndex].path)
      }
      this.tabList.forEach((v, i) => {
        if (this.$route.path == v.path) {
          this.tabIndex = i
        }
      });
      this.hideTabs(this.$route);
    },
    watch: {
      $route(to) {
        this.hideTabs(to);
      }
    }
  }
</script>

<style scoped>

</style>
